<template>
	<view class="container">
		<!-- 空状态栏占位 -->
		<view class="status-bar"></view>
		
		<!-- 头部区域 -->
		<view class="header">
			<view class="user-info">
				<image class="avatar" :src="userInfo.avatar || '/static/个人头像.png'"></image>
				<view class="user-details">
					<text class="title">仓库管理台</text>
					<view class="role-info">
						<text class="role-icon">📦</text>
						<text class="role-name">仓库管理员</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 库存统计 -->
		<view class="stats-section">
			<view class="section-title">
				<text class="title-text">库存概览</text>
				<text class="title-sub">Inventory Overview</text>
			</view>
			<view class="stats-grid">
				<view class="stat-item">
					<view class="stat-icon total">📦</view>
					<text class="stat-number">1,234</text>
					<text class="stat-label">总库存</text>
				</view>
				<view class="stat-item">
					<view class="stat-icon low">⚠️</view>
					<text class="stat-number">23</text>
					<text class="stat-label">库存不足</text>
				</view>
				<view class="stat-item">
					<view class="stat-icon out">❌</view>
					<text class="stat-number">5</text>
					<text class="stat-label">缺货</text>
				</view>
			</view>
		</view>
		
		<!-- 今日操作 -->
		<view class="operations-section">
			<view class="section-title">
				<text class="title-text">今日操作</text>
				<text class="title-sub">Today's Operations</text>
			</view>
			<view class="operation-stats">
				<view class="operation-item">
					<view class="operation-icon in">📥</view>
					<view class="operation-info">
						<text class="operation-number">12</text>
						<text class="operation-label">入库单</text>
					</view>
				</view>
				<view class="operation-item">
					<view class="operation-icon out">📤</view>
					<view class="operation-info">
						<text class="operation-number">8</text>
						<text class="operation-label">出库单</text>
					</view>
				</view>
				<view class="operation-item">
					<view class="operation-icon check">📋</view>
					<view class="operation-info">
						<text class="operation-number">3</text>
						<text class="operation-label">盘点单</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 待处理事项 -->
		<view class="pending-section">
			<view class="section-title">
				<text class="title-text">待处理事项</text>
				<text class="title-sub">Pending Items</text>
			</view>
			<view class="pending-list">
				<view class="pending-item" v-for="item in pendingItems" :key="item.id" @click="handlePendingItem(item)">
					<view class="pending-icon" :class="item.type">
						<text class="icon-text">{{ getPendingIcon(item.type) }}</text>
					</view>
					<view class="pending-content">
						<text class="pending-title">{{ item.title }}</text>
						<text class="pending-desc">{{ item.description }}</text>
						<text class="pending-time">{{ item.time }}</text>
					</view>
					<view class="pending-badge" v-if="item.count > 0">{{ item.count }}</view>
				</view>
			</view>
		</view>
		
		<!-- 快速操作 -->
		<view class="quick-actions">
			<view class="section-title">
				<text class="title-text">快速操作</text>
				<text class="title-sub">Quick Actions</text>
			</view>
			<view class="action-grid">
				<view class="action-item" @click="createInbound">
					<view class="action-icon">📥</view>
					<text class="action-text">创建入库单</text>
				</view>
				<view class="action-item" @click="createOutbound">
					<view class="action-icon">📤</view>
					<text class="action-text">创建出库单</text>
				</view>
				<view class="action-item" @click="startInventory">
					<view class="action-icon">📋</view>
					<text class="action-text">开始盘点</text>
				</view>
				<view class="action-item" @click="viewReports">
					<view class="action-icon">📊</view>
					<text class="action-text">查看报表</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import permissionManager from '@/utils/permission.js'
	
	export default {
		data() {
			return {
				userInfo: {},
				pendingItems: [
					{
						id: 1,
						type: 'inbound',
						title: '待确认入库单',
						description: '供应商A的电机配件入库',
						time: '2小时前',
						count: 3
					},
					{
						id: 2,
						type: 'outbound',
						title: '待处理出库申请',
						description: '维修部门申请备件出库',
						time: '1小时前',
						count: 5
					},
					{
						id: 3,
						type: 'check',
						title: '待完成盘点',
						description: 'A区货架盘点任务',
						time: '30分钟前',
						count: 0
					}
				]
			}
		},
		onLoad() {
			this.loadUserInfo();
		},
		methods: {
			// 加载用户信息
			loadUserInfo() {
				const { getUserInfo } = require('@/utils/auth');
				const userInfo = getUserInfo();
				if (userInfo) {
					this.userInfo = userInfo;
					permissionManager.setUserInfo(userInfo);
				}
			},
			
			// 获取头部样式
			getHeaderStyle() {
				const themeStyles = permissionManager.getThemeStyles();
				return {
					'background': `linear-gradient(135deg, ${themeStyles['--primary-color']}, ${themeStyles['--secondary-color']})`
				};
			},
			
			// 获取待处理图标
			getPendingIcon(type) {
				const iconMap = {
					'inbound': '📥',
					'outbound': '📤',
					'check': '📋'
				};
				return iconMap[type] || '📋';
			},
			
			// 处理待处理事项
			handlePendingItem(item) {
				switch(item.type) {
					case 'inbound':
						uni.navigateTo({
							url: '/pages/spare-parts/inbound-history'
						});
						break;
					case 'outbound':
						uni.navigateTo({
							url: '/pages/spare-parts/outbound-history'
						});
						break;
					case 'check':
						uni.navigateTo({
							url: '/pages/spare-parts/inventory-check'
						});
						break;
					default:
						uni.showToast({
							title: '功能开发中',
							icon: 'none'
						});
				}
			},
			
			// 创建入库单
			createInbound() {
				uni.showToast({
					title: '创建入库单功能开发中',
					icon: 'none'
				});
			},
			
			// 创建出库单
			createOutbound() {
				uni.showToast({
					title: '创建出库单功能开发中',
					icon: 'none'
				});
			},
			
			// 开始盘点
			startInventory() {
				uni.navigateTo({
					url: '/pages/spare-parts/inventory-check'
				});
			},
			
			// 查看报表
			viewReports() {
				uni.showToast({
					title: '报表功能开发中',
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	
	.status-bar {
		height: var(--status-bar-height);
		background-color: #E6A23C;
	}
	
	/* 头部区域 */
	.header {
		padding: 20rpx 30rpx;
		margin-top: 20rpx;
		background: linear-gradient(135deg, #E6A23C, #409EFF);
	}
	
	.user-info {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #f0f0f0;
	}
	
	.user-details {
		flex: 1;
	}
	
	.title {
		font-size: 48rpx;
		font-weight: bold;
		color: white;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.role-info {
		display: flex;
		align-items: center;
	}
	
	.role-icon {
		font-size: 24rpx;
		margin-right: 8rpx;
	}
	
	.role-name {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
	}
	
	/* 统计区域 */
	.stats-section {
		margin: 20rpx 30rpx;
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
	}
	
	.section-title {
		margin-bottom: 30rpx;
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.title-sub {
		font-size: 24rpx;
		color: #999;
	}
	
	.stats-grid {
		display: flex;
		justify-content: space-between;
	}
	
	.stat-item {
		flex: 1;
		text-align: center;
		padding: 20rpx;
	}
	
	.stat-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		margin: 0 auto 16rpx;
	}
	
	.stat-icon.total {
		background-color: #F0F9FF;
		color: #409EFF;
	}
	
	.stat-icon.low {
		background-color: #FEF0F0;
		color: #E6A23C;
	}
	
	.stat-icon.out {
		background-color: #FEF0F0;
		color: #F56C6C;
	}
	
	.stat-number {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #666;
	}
	
	/* 操作统计 */
	.operations-section {
		margin: 20rpx 30rpx;
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
	}
	
	.operation-stats {
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	
	.operation-item {
		flex: 1;
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		margin: 0 10rpx;
	}
	
	.operation-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		margin-right: 16rpx;
	}
	
	.operation-icon.in {
		background-color: #F0F9FF;
		color: #67C23A;
	}
	
	.operation-icon.out {
		background-color: #FEF0F0;
		color: #F56C6C;
	}
	
	.operation-icon.check {
		background-color: #F0F9FF;
		color: #409EFF;
	}
	
	.operation-info {
		flex: 1;
	}
	
	.operation-number {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 4rpx;
	}
	
	.operation-label {
		font-size: 22rpx;
		color: #666;
	}
	
	/* 待处理事项 */
	.pending-section {
		margin: 20rpx 30rpx;
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
	}
	
	.pending-list {
		margin-top: 20rpx;
	}
	
	.pending-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.pending-item:last-child {
		border-bottom: none;
	}
	
	.pending-icon {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		margin-right: 20rpx;
	}
	
	.pending-icon.inbound {
		background-color: #F0F9FF;
		color: #67C23A;
	}
	
	.pending-icon.outbound {
		background-color: #FEF0F0;
		color: #F56C6C;
	}
	
	.pending-icon.check {
		background-color: #F0F9FF;
		color: #409EFF;
	}
	
	.pending-content {
		flex: 1;
	}
	
	.pending-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.pending-desc {
		font-size: 24rpx;
		color: #666;
		display: block;
		margin-bottom: 8rpx;
	}
	
	.pending-time {
		font-size: 22rpx;
		color: #999;
	}
	
	.pending-badge {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #F56C6C;
		color: white;
		font-size: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	/* 快速操作 */
	.quick-actions {
		margin: 20rpx 30rpx 100rpx;
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
	}
	
	.action-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;
		margin-top: 20rpx;
	}
	
	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx 20rpx;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		border: 2rpx solid #e9ecef;
	}
	
	.action-icon {
		font-size: 48rpx;
		margin-bottom: 16rpx;
	}
	
	.action-text {
		font-size: 24rpx;
		color: #333;
		text-align: center;
	}
</style>
